<template>
	<view class="wrap">
		<view class="header">
			<view class="page-section-spacing">
				<!-- <swiper class="swiper" circular="true" autoplay="true" >
					<swiper-item v-for="(item,index) in array.carousel">
						<view class="swiper-item uni-bg-red">
							<image :src="item" mode=""></image>
						</view>
					</swiper-item>
				</swiper> -->
				
				<image class="swiper" :src="array.carousel[0]" mode=""></image>
				
			</view>
			<view class="top"></view>
			<view class="tops">
				<view class="titles">{{array.name}}</view>
				<view class="ppTitle">
					<!-- <view><text>￥{{array.price}}</text></view> -->
					<text class="left">剩余</text>
					<text class="right">{{array.stock}}份</text>
					
				</view>
			</view>
			<!-- <view class="share_main" @click="posterShare">分享</view> -->
		</view>
		<view class="bottom-box">
			<!-- <view class="titles">藏品详情</view> -->
			<rich-text :nodes="array.detail" bindtap="tap" class="aaa rich_img"></rich-text>
		</view>
		<view style="height:150rpx;background: #000000;">
			
		</view>
		<view class="footer" v-if="array.is_show==1">
			<text>￥{{array.price}}</text>
			<view @click="toBuy">立即购买</view>
		</view>

		<u-popup ref="popup" type="top" background-color="#fff">
			<view class="payWrap">
				<!-- <view class="tile">{{array.name}}</view> -->
				<view class="priWrap">
					<text>单价</text>
					<view>￥<text>{{array.price}}</text></view>
				</view>
				<view class="payType">
					<radio-group @change="radioChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
							<view>
								<image :src="item.img" mode=""></image>
								<text>{{item.name}}</text>
							</view>
							<view>
								<radio :value="item.value" color="#DFC791" :checked="index === current" />
							</view>
						</label>
					</radio-group>
				</view>
				<view class="read">
					同意上述<text @click="viewPage('/pages/box/agreement')">《用户购买协议》</text>
				</view>
				<view class="button" @click="payBtn">确认支付</view>
			</view>
		</u-popup>



		<!-- 海报 -->
		<view class="posterBack" v-if="posterShow" @click="posterShow = false"></view>
		<view v-if="posterShow" class="posterBacks">
			<view class="shareImg1">
				<image :src="imgSrc" :style="'width:'+w+'rpx;height:'+h+'rpx;margin:auto;margin-top:160rpx'"
					v-if="imgSrc != ''"></image>
				<canvas canvas-id="shareImg" :style="'width:'+w+'rpx;height:'+h+'rpx;margin:auto;margin-top:160rpx'"
					v-show="imgSrc == ''"></canvas>
			</view>
			<view class="maksbox"></view>
			<view class="canvas_nav">
				<view class="canvas_nav_top">
					<button plain="true" open-type="share" class="canvas-child">
						<u-image style="margin-top: 15rpx;" src="/static/index/weath-icon.png" width="96" height="96"></u-image>
						<view tyle="margin-top: -15rpx;">分享好友</view>
					</button>
					<view class="canvas-child" @click="SaveCard">
						<u-image src="/static/index/download-icon.png" width="96" height="96"></u-image>
						<view>下载海报</view>
					</view>
				</view>
				<view class="canvas_nav-bottom" @click="posterShow = false">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from "vuex"
	export default {
		data() {
			return {
				ids: 0,
				array: "",

				items: [{
					value: '1',
					name: '玉石支付',
					img: '../../static/new/yushi.png'
				}, {
					value: '2',
					name: '微信支付',
					img: '../../static/new/wxPay.png'
				}, ],
				current: 0,


				posterShow: false, //海报
				imgSrc: '',
				w: 570,
				h: 786,
				goodsImg: '', //商品图
				avatar: '', //头像
				qrcode: '', //二维码
				icon1: '',
			}
		},
		computed: {
			...mapGetters(['userInfo', 'config'])
		},
		onLoad(options) {
			if(options.share_id){
				this.ids = options.share_id
				this.$net.req('/user/fans', {
					"parent_user_id": options.share_id
				}).then(res => {
					if (res.code == 200) {
						
					}
				})
			}else if (options.scene) {
				let scene = decodeURIComponent(query.scene)
				this.ids = scene.split('!')[1].split('-')[1]
				
				this.$net.req('/user/fans', {
					"parent_user_id": scene.split('!')[0].split('-')[1]
				}).then(res => {
					if (res.code == 200) {
						
					}
				})
				
			}else if(options.id){
				this.ids = options.id
			}
			
			this.getServer()
		},
		onShareAppMessage: function(res) {
			if (res.from === 'button') {
				//console.log('来自页面内转发按钮');
			} else if (res.from === 'menu') {
				//console.log('右上角菜单转发按钮');
			}
			// 返回数据
			return {
				title: this.array.name,
				path: '/pages/newPage/shoopDetails?share_id='+this.userInfo.id+'&id='+this.ids,
				success: function(res) {
					
				},
				fail: function(res) {
					// 转发失败
				}
			}
		},
		methods: {
			getServer() {
				this.$net.req('/product/detail', {
					"id": this.ids
				}).then(res => {
					if (res.code == 200) {
						console.log(res)
						uni.setNavigationBarTitle({
							title: res.msg || ''
							// title: '藏品详情'
						});
						res.data.detail = res.data.detail.replace(/<img/g, '<img style="width:100%"');
						this.array = res.data
					}
				})
			},
			toBuy() { //type 商品类型 1 新人专享 2 新品发布 3 玉石商店
				let _this = this

				if (this.userInfo.idcard_auth == 0) {
					uni.showToast({
						title: '请先实名认证',
						duration: 2000,
						icon: "none"
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/newPage/realName'
						})
					}, 1000)
					return
				}
				if (this.userInfo.mobile == '') {
					uni.showToast({
						title: '请先绑定手机号',
						duration: 2000,
						icon: "none"
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/index'
						})
					}, 1000)
					return
				}
				if (this.array.type == 3) {
					uni.showModal({
						title: '购买说明',
						content: '此商品购买需要支付' + _this.array.price + '玉石, 请确认是否购买',
						confirmText: "确认购买",
						confirmColor: "#576B95",
						cancelText: "取消购买",
						success: function(res) {
							if (res.confirm) {
								_this.$net.req('/create_order/purchase', {
									"type": 3,
									"product_id": _this.ids
								}).then(res => {
									if (res.code == 200) {
										uni.showToast({
											title: '购买成功',
											duration: 2000,
											icon: "none"
										});
										_this.getServer()
										setTimeout(() => {
											uni.navigateTo({
												url: '/pages/cabinet/list'
											})
										}, 2000)
									}
								})
							} else if (res.cancel) {

							}
						}
					});
				} else {
					_this.$refs.popup.open()
				}
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			payBtn() {
				let _this = this
				this.$net.req('/create_order/purchase', {
					"type": this.array.type,
					"product_id": this.ids,
					"payment_type": this.current * 1 + 1
				}).then(res => {
					if (res.code == 200) {
						if (this.current == 1) {
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.data.timeStamp,
								nonceStr: res.data.nonceStr,
								package: res.data.package,
								signType: res.data.signType,
								paySign: res.data.paySign,
							 success: function(res) {
									uni.showToast({
										title: '购买成功',
										duration: 2000,
										icon: "none"
									});
									_this.getServer()
									_this.$refs.popup.close()
									setTimeout(() => {
										uni.navigateTo({
											url: '/pages/cabinet/list'
										})
									}, 2000)
								},
								fail: function(err) {

								}
							});
						} else {
							uni.showToast({
								title: '购买成功',
								duration: 2000,
								icon: "none"
							});
							_this.getServer()
							_this.$refs.popup.close()
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/cabinet/list'
								})
							}, 2000)
						}
					}
				})
			},
			viewPage(url) {
				this.router(url)
			},

			// 生成海报
			posterShare() {
				this.posterShow = true
				if (this.imgSrc != '') {
					return; //判断that.imgSrc是不是空的字符串，如果是空的就继续画图，如果不是空的就return返回that.imgSrc它已经有的字符串
				}
				this.$net.req('/product/getMiniCode', {
					product_id: this.ids
				}, false).then(res => {
					if (res.code === 200) {
						uni.showLoading({
							title: '图片生成中...',
							mask: true
						})
						if (this.userInfo.avatarUrl) {
							this.downloadImg('avatar', this.userInfo.avatarUrl)
						} else {
							uni.showToast({
								title: '请先同步信息',
								icon: 'none'
							});
						}
						this.downloadImg('goodsImg', this.array.image)
						this.downloadImg('icon1', res.data.arrow)
						this.downloadImg('qrcode', res.data.qrcode)
					} else {
						uni.showToast({
							title: '二维码生成失败',
							icon: 'none'
						});
					}
				})
			},


			SaveCard() {
				let that = this;
				let tempFilePaths = that.imgSrc //tempFilePaths定义一下海报的的临时地址
				wx.saveImageToPhotosAlbum({
					filePath: tempFilePaths,
					success(res) {
						uni.showToast({
							icon: "none",
							title: "图片保存成功"
						})
					}
				})
			},
			downloadImg(str, url) {
				var that = this;
				uni.downloadFile({
					url: url,
					success: function(res3) {
						that[str] = res3.tempFilePath
						if (that.avatar != '' && that.goodsImg != '' && that.qrcode != '' && that.icon1 !=
							'') {
							uni.hideLoading(); //隐藏图片加载旋转标志
							that.draw()
						}
					},
					fail: function(err) {
						uni.hideLoading();
						uni.showToast({
							title: '海报制作失败，请点击分享转发',
							icon: 'none'
						});
					}
				})
			},
			px_to_rpx(e) {
				return (e / 2) * (wx.getSystemInfoSync().windowWidth / 375)
			},
			darwRoundRect(x, y, w, h, r, ctx, color) {
				ctx.save()
				ctx.beginPath()
				ctx.arc(x + r, y + r, r, 1 * Math.PI, 1.5 * Math.PI)
				ctx.moveTo(x, y + r)
				ctx.lineTo(x, y + h - r)
				ctx.arc(x + r, y + h - r, r, 0.5 * Math.PI, 1 * Math.PI)
				ctx.lineTo(x + r, y + h)
				ctx.lineTo(x + w - r, y + h)
				ctx.arc(x + w - r, y + h - r, r, 0 * Math.PI, 0.5 * Math.PI)
				ctx.lineTo(x + w, y + h - r)
				ctx.lineTo(x + w, y + r)
				ctx.arc(x + w - r, y + r, r, 1.5 * Math.PI, 2 * Math.PI)
				ctx.lineTo(x + w - r, y)
				ctx.lineTo(x + r, y)
				ctx.setFillStyle(color)
				ctx.fill()
				ctx.restore();
			},
			async drawImg(url, x, y, w, h, ctx) {
				let _this = this;
				ctx.drawImage(url, _this.px_to_rpx(x), _this.px_to_rpx(y), _this
					.px_to_rpx(w), _this.px_to_rpx(h));
			},
			async draw() {
				let _this = this;
			
				let ctx = uni.createCanvasContext('shareImg', this)
				//第一层背景
				ctx.setFillStyle('#FFFFFF')
				ctx.fillRect(0, 0, _this.px_to_rpx(_this.w), _this.px_to_rpx(_this.h))
				ctx.restore();
				//奖品图
				_this.drawImg(_this.goodsImg, 20, 20, 570, 570, ctx)
				// 小图标
				_this.drawImg(_this.icon1, 20, 595, 40, 40, ctx)
				// 商品标签
				ctx.setFillStyle('#2E2B2B')
				ctx.setFontSize(_this.px_to_rpx(28))
				ctx.fillText('扫码进入', _this.px_to_rpx(70), _this.px_to_rpx(625));
				// ctx.fillText('Shopping Go', _this.px_to_rpx(70), _this.px_to_rpx(625));
			
				// 价钱
				ctx.setFillStyle('#DFC791')
				ctx.setFontSize(_this.px_to_rpx(28))
				ctx.fillText('￥' + _this.detail.price, _this.px_to_rpx(286), _this.px_to_rpx(625));
				// 二维码
				_this.drawImg(_this.qrcode, 408, 528, 122, 122, ctx)
				// 商品名称 
				let names = _this.detail.name
				let name
				// let names = '超长名称测试用不换行省略号显示问题阿斯蒂芬看见了开皇冠老虎机'
				if (names.length > 20) {
					name = names.slice(0, 15) + '...'
				} else {
					name = names
				}
				ctx.setFillStyle('#2E2B2B')
				ctx.setFontSize(_this.px_to_rpx(28))
				ctx.fillText(name, _this.px_to_rpx(20), _this.px_to_rpx(700));
				// 标签
				ctx.setFillStyle('#C3C2C1')
				ctx.setFontSize(_this.px_to_rpx(24))
				ctx.fillText('邀请好友下单反玉石', _this.px_to_rpx(20), _this.px_to_rpx(748));
			
				//头像
				// ctx.save();
				// ctx.beginPath();
				// ctx.arc(_this.px_to_rpx(62), _this.px_to_rpx(796), _this.px_to_rpx(32), 0, Math.PI *
				// 	2, false);
				// ctx.clip();
				// ctx.drawImage(_this.avatar, _this.px_to_rpx(14), _this.px_to_rpx(752), _this
				// 	.px_to_rpx(96), _this.px_to_rpx(96)); //绘制图
				// ctx.restore();
				ctx.draw(true, () => {
					setTimeout(function() {
						uni.canvasToTempFilePath({
							canvasId: 'shareImg',
							fileType: 'jpg',
							x: 0,
							y: 0,
							width: _this.px_to_rpx(_this.w) * 8, //四倍图，防止模糊
							height: _this.px_to_rpx(_this.h) * 8,
							destWidth: _this.px_to_rpx(_this.w) * 8,
							destHeight: _this.px_to_rpx(_this.h) * 8,
							success: function(res) {
								_this.imgSrc = res.tempFilePath
							},
							fail: function(error) {},
						})
					}, 100)
				})
			}
		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		background: #000000;
	}
</style>
<style scoped lang="scss">
	.wrap {
		width: 100%;
		position: relative;
		background: #000000;
		.header {
			width: 100%;
			background: #FFFFFF;
			position: relative;

			.share_main {
				width: 28px;
				height: 50px;
				background: #DFC791;
				border-radius: 8px 0px 0px 8px;
				font-size: 14px;
				font-family: HarmonyOS_Sans_SC_Medium;
				color: #2F2E3B;
				position: absolute;
				right: 0;
				bottom: 110px;
				writing-mode: vertical-rl;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.page-section-spacing {
				width: 750rpx;
				height: 750rpx;

				.swiper {
					width: 100%;
					height: 100%;

					swiper-item {
						width: 100%;
						height: 100%;

						.swiper-item {
							width: 100%;
							height: 100%;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}
			.top{
				margin-top: -50rpx;
				position: relative;
				z-index: 999;
				width: 100%;
				height: 50rpx;
				background: #000;
				background: -webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
				background: -moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);; /*FireFox*/
				background: -o-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);  /* Opear */
				background: -ms-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1)); /*IE10及IE10+*/
			}
			.tops {
				text-align: center;
				width: 100%;
				padding: 12px;
				box-sizing: border-box;
				background: #000000;
				
				.titles {
					font-size: 24px;
					font-family: HarmonyOS_Sans_SC_Medium;
					color: #FFFFFF;
					font-weight: bolder;
				}

				.ppTitle {
					width: 100%;
					display: flex;
					align-items: center;
					margin-top: 10px;
					justify-content: center;
					
					.left {
						padding: 0 10rpx;
						border-top-left-radius: 5rpx;
						border-botttom-left-radius: 5rpx;
						background: #EFBF62;
						font-size: 12px;
						font-family: HarmonyOS_Sans_SC;
						color: #000000;
					}
					.right{
						padding: 0 10rpx;
						border-top-right-radius: 5rpx;
						border-botttom-right-radius: 5rpx;
						background: #4B4B4C;
						font-size: 12px;
						font-family: HarmonyOS_Sans_SC;
						color: #EFBF62;
					}

					view {
						font-size: 12px;
						font-family: HarmonyOS_Sans_SC_Medium;
						color: #DFC791;

						text {
							font-size: 18px;
							font-weight: bolder;
						}
					}
				}
			}
		}

		.bottom-box {
			margin: 0 auto;
			width: 95%;
			margin-top: 16px;
			// padding: 16px 12px 100px;
			border-radius: 20rpx;
			box-sizing: border-box;
			background: #1A1A1A;
			
			.titles {
				text-align: center;
				font-size: 14px;
				font-family: HarmonyOS_Sans_SC_Medium;
				color: #FFFFFF;
				margin-bottom: 16px;
				font-weight: bolder;
			}

		}

		.footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 50px;
			background: #000000;
			box-shadow: 0px -6px 10px 0px rgba(0, 0, 0, 0.03);
			// border-radius: 16px 16px 0px 0px;
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 16px 12px;
			box-sizing: border-box;
			text{
				font-size: 24px;
				color: #FFFFFF;
			}
			view {
				width: 50%;
				height: 45px;
				background: #DFC791;
				border-radius: 8px;
				// border: 2px solid #2F2E3B;
				font-size: 16px;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #2F2E3B;
				line-height: 45px;
				text-align: center;
			}
		}

		.payWrap {
			width: 500rpx;
			background: #FFFFFF;
			border-radius: 16px 16px 0px 0px;
			padding: 20px 12px;
			box-sizing: border-box;
			// position: fixed;
			// bottom: 0;
			// left: 0;
			.tile {
				width: 100%;
				font-size: 18px;
				font-family: HarmonyOS_Sans_SC_Medium;
				color: #101010;
			}

			.priWrap {
				width: 100%;
				display: flex;
				align-items: center;
				margin-top: 24px;
				justify-content: space-between;
				padding-bottom: 15px;
				border-bottom: 1px solid #F0F0F0;

				>text {
					font-size: 14px;
					font-family: HarmonyOS_Sans_SC;
					color: #2E2B2B;
				}

				view {
					font-size: 12px;
					font-family: HarmonyOS_Sans_SC_Medium;
					color: #DFC791;

					text {
						font-size: 18px;
					}
				}
			}

			.payType {
				width: 100%;

				.uni-list-cell {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 15px 0;
					border-bottom: 1px solid #F0F0F0;

					view {
						&:nth-child(1) {
							display: flex;
							align-items: center;

							image {
								width: 20px;
								height: 20px;
							}

							text {
								font-size: 14px;
								font-family: HarmonyOS_Sans_SC;
								color: #2E2B2B;
								margin-left: 5px;
							}
						}
					}
				}
			}

			.read {
				font-size: 14px;
				font-family: HarmonyOS_Sans_SC;
				color: #6A6976;
				width: 100%;
				margin: 17px 0 24px;

				text {
					color: #FEA942;
				}
			}

			.button {
				width: 100%;
				height: 48px;
				background: #DFC791;
				border-radius: 8px;
				// border: 2px solid #2F2E3B;
				font-size: 16px;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #2F2E3B;
				line-height: 48px;
				text-align: center;
			}
		}


		// 海报
		.posterBack {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			background-color: rgba($color: #000000, $alpha: 0.7);
			z-index: 999;
		}

		.posterBacks {
			position: fixed;
			z-index: 99999;

			.shareImg1 {
				position: fixed;
				top: 0rpx;
				left: 0%;
				width: 100%;
				height: calc(100vh - 360rpx);
				overflow: auto;
				z-index: 100;
				text-align: center;
			}

			.canvas_nav {
				width: 750rpx;
				height: 356rpx;
				background: #FFFFFF;	//商品详情页分享块 背景色
				border-radius: 24rpx 24rpx 0px 0px;
				position: fixed;
				bottom: 0;
				z-index: 99999;
				left: 0;
				padding: 40rpx 108rpx;

				.canvas_nav_top {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.canvas-child {
						width: 162rpx;
						height: 162rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						color: #333333;
						padding: 0;
						border: none;
						margin: 0;

						view {
							margin-top: 16rpx;
						}
					}

				}
			}

			.canvas_nav-bottom {
				position: fixed;
				bottom: 0;
				width: 100%;
				height: 112rpx;
				background: #FFFFFF;
				text-align: center;
				line-height: 112rpx;
				font-size: 32rpx;
				color: #333330;
				left: 0;
			}
		}
	}
</style>
